<template>
	<view class="page">
		<view class="content">
			<view class="warp flex">
				<view class="item center" v-for="(e,i) in list" :key="i">
					<view class="img">
						<img class="img" :src="e.img" alt="">
					</view>
					<view class="text center">
						{{ e.name }}
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item center" v-for="(e,i) in list" :key="i">
					<view class="img">
						<img class="img" :src="e.img" alt="">
					</view>
					<view class="between footer">
						 <view class="between">
						 	 <img class="img" :src="e.img" alt="">
							 <view>{{ e.name }} </view>
						 </view>
						 <view class="between flex1">
						 	 <view class="flex">
						 	 	<img class="img" :src="e.img" alt="">
						 	 	<view> 1234</view>
						 	 </view>
							 <view class="flex">
							 	<img class="img" :src="e.img" alt="">
							 	<view> 2345 </view>
							 </view>
						 </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss" scoped>
	.page {
		.content {
			.warp {
				width: 100vw;
				overflow: auto;

				.item {
					margin: 5px;

					.img {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}

					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular-, PingFangSC-Regular;
						font-weight: normal;
						color: #232832;
						margin-top: 10px;
					}
				}
			}
			.list{
				.item{
					
					.footer{
						width: 80%;
						.img{
							width: 20px;
							height: 20px;
							border-radius: 50%;
						}
					}
				}
			}


		}
	}
</style>
